<template>
	<view>
        <!-- 搜索 -->
        <UgoSearch></UgoSearch>

        <!-- 轮播图 -->
        <view class="swiper">
            <u-swiper  height="340" :list="swiperList" name="image_src"></u-swiper>
        </view>

        <!-- 导航栏 -->
        <view class="nav u-flex">
            <navigator v-for="item in navList" :key="item.name" class="u-flex-1 u-p-15">
                <u-image :src="item.image_src" mode="widthFix"></u-image>
            </navigator>
        </view>
<!-- v-for="item1 in " -->
        <!-- 商品楼层 -->
        <view class="floor-group" v-for="item in floorList" :key="item.floor_title.name">
            <view class="floor-title" width="100%">
                    <u-image mode="widthFix" width="100%" :src="item.floor_title.image_src" />
            </view>
            <view class="floor_goods">
                <navigator class="floor_goods_nav" v-for="img in item.product_list" :key="img.name">
                    <u-image class="floor_goods_img" width="100%" height="100%" mode="scaleToFill" :src="img.image_src" />
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],// 轮播图数据
                navList:[], // 导航栏数据
                floorList:[] // 楼层商品数据
			}
		},
		onLoad() {
            this.getSwiperList()
            this.getNavList()
            this.getFloorList()
		},
		methods: {
            // 获取轮播图数据
            async getSwiperList(){
               this.swiperList = await this.$u.http.get('/home/swiperdata')
            },
            // 获取导航栏数据
            async getNavList(){
                this.navList = await this.$u.http.get('/home/catitems')
            },
            // 获取楼层商品数据
            async getFloorList(){
                this.floorList = await this.$u.http.get('/home/floordata')
            }
		}
	}
</script>

<style lang="scss" scoped>
.floor-group{
    padding: 0 12rpx;
    margin: 10rpx 0;
    overflow: hidden;
    .floor_goods_nav{
        float: left;
        width: 232rpx;
        height: 188rpx;
    }
    .floor_goods_nav:first-child{
        height: 386rpx;
    }
    .floor_goods_nav:nth-last-child(2n){
        margin: 0 15rpx;
    }
    .floor_goods_nav:nth-last-child(-n+2){
        margin-top: 10rpx;
    }
}

</style>